<template>
  <div class="app-container" style="padding: 5px;">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="table" :data="tableData" style="width: 100%" row-key="id" border lazy :load="load" empty-text="暂无数据."
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="标识" width="200" />
      <el-table-column prop="type" label="类型" width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.type=='FOLDER' ">目录</span>
          <span v-if="scope.row.type=='MENU' ">菜单</span>
        </template>
      </el-table-column>
      <el-table-column prop="isDisplay" label="显示" width="70">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDisplay==0 " type="info">隐藏</el-tag>
          <el-tag v-else>显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isCtrl" label="控制" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCtrl==0 " type="info">不可控</el-tag>
          <el-tag v-else>可控</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="50" />
      <el-table-column label="操作" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.type=='FOLDER'" type="text" icon="el-icon-edit" size="small"
            @click="handleAddChild(scope.row)">新增下级</el-button>
          <el-button v-if="scope.row.type=='MENU'" type="text" icon="el-icon-copy-document" size="small"
            @click="handleMenuLayer(scope.row)">图层</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="deleteRow(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <info-dialog v-if="editDrawer.visible" :properties="editDrawer" @closed="dialogClose" @refresh="refreshLoadTree"
      @refreshAll="load" />
    <MenuLayerDialog v-if="menuLayerDrawer.visible" :properties="menuLayerDrawer" @openLayerd="openLayer"
      @closed="dialogClose" />
    <LayerDialog v-if="layerDrawer.visible" :properties="layerDrawer" @closed="closeLayer" />
  </div>
</template>
<script>
  import {
    loadMenus,
    saveMenu,
    deleteMenu,
    getLayerByMenu
  } from '@/api/subsystem/scenemenu'
  import {
    isOk
  } from '@/utils/request'
  import InfoDialog from './components/InfoDialog.vue'
  import MenuLayerDialog from './components/MenuLayerDialog.vue'
  import LayerDialog from './components/LayerDialog.vue'

  export default {
    name: 'SubMenu',
    components: {
      InfoDialog,
      MenuLayerDialog,
      LayerDialog
    },
    data() {
      return {
        queryForm: {
          rootId: '0',
          projectId: this.$store.getters.projectId
        },
        maps: new Map(),
        tableData: [],
        loading: false,
        /* 0-新增  1-编辑  2-新增子菜单  3-添加权限点*/
        handleType: '',
        parentId: '',
        menuId: '',
        grandParentId: '',
        editDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        menuLayerDrawer: {
          visible: false,
          menuId: '',
          type: '0',
          data: []
        },
        layerDrawer: {
          visible: false,
          menuId: ''
        },
      }
    },
    computed: {},
    created() {
      this.load()
    },
    methods: {
      load(tree, treeNode, resolve) {
        /* 懒加载树形列表 */
        if (tree != null) {
          this.queryForm.rootId = tree.id
          const parentId = tree.id
          this.maps.set(parentId, {
            tree,
            treeNode,
            resolve
          }) // 将当前选中节点数据存储到maps中
        } else {
          this.queryForm.rootId = '0'
        }
        loadMenus(this.queryForm).then(rsp => {
          /* 树形列表展开时触发*/
          if (isOk(rsp)) {
            const menus = rsp.result
            if (treeNode) {
              resolve(menus)
            } else {
              this.tableData = menus
            }
          }
        })
      },
      dialogClose: function() {
        /* 关闭弹窗 */
        this.editDrawer.visible = false
        this.editDrawer.type = '0'
        this.editDrawer.grandParentId = ''
        this.editDrawer.parentId = ''
        this.editDrawer.data = {}
        this.menuLayerDrawer.visible = false
        this.menuLayerDrawer.menuId = ''
        this.menuLayerDrawer.type = '0'
        this.menuLayerDrawer.data = []
        this.layerDrawer.visible = false
        this.layerDrawer.menuId = ''
      },
      openLayer: function(e, id) {
        this.menuLayerDrawer.visible = false
        this.menuLayerDrawer.menuId = ''
        this.menuLayerDrawer.type = '0'
        this.menuLayerDrawer.data = []
        this.layerDrawer.visible = true
        this.layerDrawer.menuId = this.menuId
      },
      closeLayer: function(e, id) {
        this.layerDrawer.visible = false
        this.layerDrawer.menuId = ''
        this.menuLayerDrawer.visible = true
        this.menuLayerDrawer.type = '0'
        this.menuLayerDrawer.data = []
        this.menuLayerDrawer.menuId = this.menuId
      },
      handleAdd: function() {
        /* 新增节点，父节点为根节点 -1 */
        this.editDrawer.visible = true
        this.editDrawer.type = '0'
      },
      handleEdit: function(row) {
        this.editDrawer.visible = true
        this.editDrawer.type = '1'
        this.editDrawer.data = row
      },
      handleAddChild: function(row) {
        this.editDrawer.visible = true
        this.editDrawer.type = '2'
        this.editDrawer.grandParentId = row.parentId
        this.editDrawer.parentId = row.id
      },
      handleMenuLayer: function(row) {
        this.menuId = row.id
        getLayerByMenu({
          projectId: this.$store.getters.projectId,
          menuId: row.id
        }).then(rsp => {
          if (isOk(rsp)) {
            const _data = rsp.result
            if (_data && _data.length > 0) {
              this.menuLayerDrawer.visible = true
              this.menuLayerDrawer.menuId = row.id
              this.menuLayerDrawer.type = '1'
              this.menuLayerDrawer.data = _data
            } else {
              this.openLayer()
            }
          } else {
            this.openLayer()
          }
        })
      },
      deleteRow: function(rows) {
        /* 删除行 */
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMenu({
            id: rows.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            })
            const {
              parentId
            } = rows // 取出当前删除行的父节点id
            const parentIds = '' + parentId
            if (parentIds === '0') {
              this.queryForm.rootId = '0'
              this.load()
            } else {
              this.refreshLoadTree(parentIds)
            }
          })
        })
      },
      refreshLoadTree: function(parentId, grandParentId) {
        /* 局部刷新列表 */
        if (this.maps.get(parentId)) {
          const {
            tree,
            treeNode,
            resolve
          } = this.maps.get(parentId) // 根据父节点id取出对应的节点数据
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, []) // 将对应节点下的数据清空，从而实现数据的重新加载
          this.load(tree, treeNode, resolve)
        } else {
          if (this.maps.get(grandParentId)) {
            const {
              tree,
              treeNode,
              resolve
            } = this.maps.get(grandParentId)
            this.$set(this.$refs.table.store.states.lazyTreeNodeMap, grandParentId, [])
            this.load(tree, treeNode, resolve)
          } else {
            this.load()
          }
        }
      }
    }
  }
</script>

<style lang="scss">

</style>
